<template>
  <view class="container">
    <!-- 购物车列表 -->
    <view class="cart-list" v-if="cartItems.length > 0">
      <view class="cart-item" v-for="(item, index) in cartItems" :key="index">
        <view class="item-left">
          <checkbox :checked="item.checked" @change="toggleCheck(index)"></checkbox>
        </view>
        <view class="item-middle">
          <image :src="item.image" class="item-image"></image>
        </view>
        <view class="item-right">
          <text class="item-name">{{ item.name }}</text>
          <text class="item-price">¥{{ item.price }}</text>
          <view class="quantity-box">
            <button class="quantity-btn" @click="decreaseQuantity(index)">-</button>
            <text class="quantity">{{ item.count }}</text>
            <button class="quantity-btn" @click="increaseQuantity(index)">+</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 空购物车状态 -->
    <view class="empty-cart" v-else>
      <image src="/static/empty-cart.png" class="empty-image"></image>
      <text class="empty-text">购物车空空如也</text>
      <button class="empty-btn" @click="goShopping">去逛逛</button>
    </view>

    <!-- 底部结算栏 -->
    <view class="bottom-bar" v-if="cartItems.length > 0">
      <view class="left-section">
        <checkbox :checked="allChecked" @change="toggleAllCheck">全选</checkbox>
        <text class="total-price">合计: <text class="price">¥{{ totalAmount.toFixed(2) }}</text></text>
      </view>
      <button class="right-btn" :disabled="!hasSelected" @click="checkout">结算({{ selectedCount }})</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 购物车数据
const cartItems = ref([]);

// 页面加载时获取购物车数据
onLoad(() => {
  const items = uni.getStorageSync('cartItems') || [];
  cartItems.value = items;
});

// 计算属性：是否全选
const allChecked = computed(() => {
  return cartItems.value.every(item => item.checked);
});

// 计算属性：选中数量
const selectedCount = computed(() => {
  return cartItems.value.filter(item => item.checked).length;
});

// 计算属性：总金额
const totalAmount = computed(() => {
  return cartItems.value.reduce((total, item) => {
    return item.checked ? total + (item.price * item.count) : total;
  }, 0);
});

// 计算属性：是否有选中商品
const hasSelected = computed(() => {
  return selectedCount.value > 0;
});

// 切换单个商品选中状态
const toggleCheck = (index) => {
  cartItems.value[index].checked = !cartItems.value[index].checked;
  saveCart();
};

// 切换全选状态
const toggleAllCheck = (e) => {
  const checked = e.detail.value.length > 0;
  cartItems.value.forEach(item => {
    item.checked = checked;
  });
  saveCart();
};

// 减少商品数量
const decreaseQuantity = (index) => {
  if (cartItems.value[index].count > 1) {
    cartItems.value[index].count--;
    saveCart();
  }
};

// 增加商品数量
const increaseQuantity = (index) => {
  cartItems.value[index].count++;
  saveCart();
};

// 保存购物车数据
const saveCart = () => {
  uni.setStorageSync('cartItems', cartItems.value);
};

// 去购物
const goShopping = () => {
  uni.navigateBack();
};

// 结算
const checkout = () => {
  const selectedItems = cartItems.value.filter(item => item.checked);
  if (selectedItems.length === 0) {
    uni.showToast({
      title: '请选择商品',
      icon: 'none'
    });
    return;
  }
  
  // 跳转到结算页
  uni.navigateTo({
    url: `/pages/order/confirm?items=${JSON.stringify(selectedItems)}`
  });
};
</script>

<style scoped>
.container {
  padding-bottom: 120rpx; /* 底部栏高度 */
}

.cart-list {
  padding: 20rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.item-left {
  width: 60rpx;
}

.item-middle {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
}

.item-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
  object-fit: cover;
}

.item-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160rpx;
}

.item-name {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #e60012;
}

.quantity-box {
  display: flex;
  align-items: center;
  width: 240rpx;
}

.quantity-btn {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border: 1rpx solid #ddd;
  font-size: 32rpx;
}

.quantity {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-top: 1rpx solid #ddd;
  border-bottom: 1rpx solid #ddd;
  font-size: 32rpx;
}

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 800rpx;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
}

.empty-text {
  margin-top: 40rpx;
  font-size: 32rpx;
  color: #999;
}

.empty-btn {
  margin-top: 60rpx;
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #28a745;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.left-section {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 30rpx;
}

.total-price {
  margin-left: 30rpx;
  font-size: 32rpx;
}

.price {
  color: #e60012;
  font-weight: bold;
}

.right-btn {
  width: 240rpx;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  background-color: #28a745;
  color: #fff;
  font-size: 32rpx;
}
</style>